import React from 'react';
import classNames from 'classnames';

// 定义属性
// export enum ButtonSize {
//     Large = 'lg',
//     Samll = 'sm'
// }
// export enum ButtonType {
//     Primary = 'primary',
//     Default = 'default',
//     Danger = 'danger',
//     Link = 'link',
// }

export type ButtonSize = 'lg' | 'sm';
export type ButtonType = 'primary' | 'default' | 'danger' | 'link';

// 按钮样式接口
interface BaseButtonProps {
    className?: string;
    disabled?: boolean;
    size?: ButtonSize;
    btnType?: ButtonType;
    children?: React.ReactNode;
    href?: string;
}


type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>; // button的原生属性
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>; // a链接的属性
// 通过Partial<T>将所有属性都设置为可选属性，以免有些属性在这个类型是可选的那个类型是必须的类似冲突
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>; // 联合属性的联合属性

const Button: React.FC<ButtonProps> = (props) => {
    // 解构属性
    const {
        disabled = false,
        size,
        btnType = "default",
        children,
        href,
        className,
        ...restProps
    } = props;

    // 由btn开头  以 ‘ btn- ’ 形式添加类名  例如btn-lg  btn-primary 
    const classes = classNames('btn', className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'disabled': btnType === "link" && disabled  // 是链接类型并且提供了disabled属性
    });

    if (btnType === "link" && href) {
        // 可以点击的链接按钮
        return (
            <a href={href} className={classes} {...restProps}>
                {children}
            </a>
        );
    } else {
        // 其他按钮 button本身就有disabled属性，因此不放置类名里面，而是单独添加
        return (
            <button className={classes} disabled={disabled} {...restProps}>
                {children}
            </button>
        );
    }
}

export default Button;